<template>
  <el-dialog v-model="dialogVisible" :destroy-on-close="true" :align-center="true" width="40%" title="我要举报">
    <el-form
      ref="wsFormRef"
      :disabled="dialogData.isView"
      :model="dialogData.itemInfo"
      label-width="120px"
      label-suffix=" :"
      :hide-required-asterisk="dialogData.isView"
    >
      <div class="info-title">举报信息</div>
      <el-form-item label="举报类型">
        <el-select v-model="dialogData.itemInfo.reportType" class="m-2" placeholder="请选择" size="large" style="width: 100%">
          <el-option v-for="item in workerReportEnum" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="举报内容">
        <el-input
          style="width: 100%"
          v-model="dialogData.itemInfo.content"
          :autosize="{ minRows: 5 }"
          type="textarea"
          placeholder="请填写举报信息"
          maxlength="100"
          show-word-limit
        />
      </el-form-item>
      <div class="info-title">回复信息</div>
      <el-form-item label="回复时间">
        <el-date-picker v-model="dialogData.itemInfo.backDate" type="date" placeholder="请选择日期" />
      </el-form-item>
      <el-form-item label="回复内容">
        <el-input
          style="width: 100%"
          v-model="dialogData.itemInfo.backContent"
          :autosize="{ minRows: 5 }"
          type="textarea"
          placeholder="请填写举报信息"
          maxlength="100"
          show-word-limit
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">关闭</el-button>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import { DialogParam } from "@/biz/interface/DialogType";
import { WorkerReportEntity } from "@/biz/interface/WorkerType";
import { workerReportEnum } from "@/biz/datas/workerData";
import { infoWorkerReportApi } from "@/api/modules/cpyswk/wk";

//页面的数据
interface OptionDialogOption extends DialogParam {
  //弹出表单的标题
  //是否是查看状态，查看状态是不可以提交数据
  isView: boolean;
  // 工友
  workerId: string;
  //当前的数据对象
  itemInfo: WorkerReportEntity;
}

//弹出框的参数
const dialogVisible = ref(false);
//当前表单数据在这里初始化
const dialogData = reactive<OptionDialogOption>({
  isView: false,
  workerId: "",
  itemInfo: {}
});

// 接收父组件传过来的参数
const acceptParams = (params: OptionDialogOption): void => {
  dialogData.rowData = params.rowData;
  dialogData.isView = true;

  // console.log("接收到的参数:", dialogData.rowData);

  if (dialogData.rowData) {
    if (dialogData.rowData.id) {
      getItemInfo(dialogData.rowData.id);
    } else {
      initItemInfo();
    }
  }

  dialogVisible.value = true;
};

//初始化页面的数据
const initItemInfo = (): void => {
  dialogData.itemInfo = {};
};
//获取当前数据的详情，直接调用接口获取数据
const getItemInfo = async (id: string) => {
  if (id) {
    let { data } = await infoWorkerReportApi({ id });
    dialogData.itemInfo = data as unknown as WorkerReportEntity;
  }
};

//页面参数
defineExpose({
  acceptParams
});
</script>
<style scoped lang="scss">
.info-wrapper {
  width: 100%;
  background: var(--el-color-info-light-7);

  .info-item {
    color: var(--el-color-info);
    font-size: 0.8rem;
    font-weight: 600;
  }
}
</style>
